/* COMMON */

html { 
  font: 13px/27px arial,sans-serif;
}

.ink {
  .transition(~"opacity, -webkit-transform");
  .transform(scale(.001));
  .transform-origin(center center);
  background-color: #ccc;
  border-radius: 50%;
  height: 200px;
  left: -100px;
  opacity: 0;
  position: absolute;
  top: -100px;
  width: 200px;
  z-index: 100;

  &.dropped{
    .transition-duration(0.3s);
    .transition-timing(linear);
    .transform(scale(.25));
    opacity: 1;
  }

  &.spread {
    .transition-duration(0.5s);
    .transition-timing(ease-out);
    .transition-property(~"opacity, -webkit-transform");
    .transform(scale(3));
    opacity: 0.8;
  }

  &.evaporate {
    opacity: 0;
    -webkit-transform: scale(0.3);
    -webkit-transition-property: opacity, -webkit-transform;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: linear;
  }
}

.inkWipe {
  .selectDisable;
  .transition-property(~"-webkit-transform");
  .transform-origin(center center);
  .transform(scale(.001));
  background-color: #fff;
  border-radius: 50%;
  height: 200px;
  opacity: 0;
  position: absolute;
  width: 200px;
  z-index: 200;

  &.dropped {
    .transition-duration(0.3s);
    .transition-property(~"-webkit-transform, background-color");
    .transition-timing(ease-in-out);
    .transform(scale(.25));
    background-color: #fafafa;
    opacity: 1;
  }

  &.spread {
    .transition-duration(0.5s);
    .transition-property(~"-webkit-transform, background-color");
    .transition-timing(ease-in-out);
    .transform(scale(3));
    background-color: #fafafa;
    opacity: 1;
  }
}